import React, { Component } from 'react'

export default class Old extends Component {
  constructor () {
    super()
    console.log('--old constructor--定义模型数据')
    this.state = {
      name: '麦当劳'
    }
  }
  // vue:beforeMount 挂载前
  componentWillMount () {
    console.log('--old componentWillMount--')
  }
  // vue mounted 挂载完成
  componentDidMount () {
    console.log('---old componentDidMount--,发请求--')
  }

  componentWillReceiveProps (props) {
    console.log('---componentWillReceiveProps--', props)
  }
  shouldComponentUpdate (nextProps, nextState) {
    console.log('--old shouldComponentUpdate--', nextProps, nextState)
    return false
  }

  // vue beforeUpdate
  componentWillUpdate (nextProps, nextState) {
    console.log('--old componentWillUpdate--', nextProps, nextState)
  }

  // vue updated 拿到再次渲染后的dom
  componentDidUpdate () {
    console.log('--old componentDidUpdate--拿到再次渲染后的dom')
  }

  render () {
    console.log('--old render ---')
    return (
      <div>
        Old---age:{this.props.age}---name:{this.state.name}
        <p>
          <button
            onClick={() => {
              this.setState({ name: 'kfc' })
            }}
          >
            change
          </button>
        </p>
      </div>
    )
  }
  componentWillUnmount () {
    console.log('--componentWillUnmount--')
  }
}
